* {
  margin: 0;
  padding: 0;
  font-size: 0.16rem;
  text-decoration: none;
  box-sizing: border-box;
  list-style: none;
}

html,
body,
#root,
.index,
.home,
.cart,
.login,
.register,
.goods,
.mine,
.detail,
.shopcart,
.collect,
.app {
  height: 100%;
  display: flex;
  flex-direction: column;
}

html {
  font-size: 26.67vw;
}

//首页
.index {
  .home {

    header {
      height: 0.8rem;
      background-color: rgb(206, 0, 14);
      display: flex;
      align-items: center;
      justify-content: space-around;

      .adm-search-bar {
        width: 3rem;
        --height: .4rem;
        --background: #fff;

        svg {
          color: red;
        }
      }

      .icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #fff;

        svg {
          font-size: .2rem;
        }

        span {
          font-size: .14rem;
        }
      }
    }

    main {
      flex: 1;
      overflow-y: scroll;
      margin-bottom: .4rem;

      .adm-swiper {
        height: 1.6rem;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .m_list {
        padding: .1rem;

        span {
          color: red;
          font-size: .14rem;
        }

        .m_lists {
          display: flex;
          flex-wrap: wrap;

          .cate {
            width: 20%;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: .1rem;

            img {
              width: 0.4rem;
              height: 0.4rem;
              border-radius: 50%;
              color: red;
            }

            .name {
              font-size: .14rem;
            }
          }
        }

      }

      .m_fot {
        height: 1rem;
        background-color: aqua;
      }

      .shoplist {
        .title {
          width: 100%;
          height: .5rem;
          background-image: url(./assets/2.png);
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 .2rem;

          .zuo {
            display: flex;
            align-items: center;

            .time {
              color: red;

              span {
                display: inline-block;
                width: .2rem;
                height: .2rem;
                background-color: rgb(188, 0, 0);
                color: #fff;
                line-height: .2rem;
                text-align: center;
                font-size: .12rem;
                border-radius: .02rem;
                margin: 0 .02rem;
              }
            }

            p {
              color: #000;
            }
          }

          .you {
            display: flex;
            align-items: center;

            svg {
              transform: rotate(-90deg);
            }
          }
        }

        .shoppinglist {
          margin-top: .2rem;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-evenly;

          .shopping {
            width: 30%;
            height: 2rem;

            .img {
              width: 100%;

              img {
                width: 100%;
              }
            }

            .shoppingname {
              font-size: .14rem;
              width: 100%;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }

            .oprice {
              display: inline-block;
              padding: 1px 2px;
              font-size: .12rem;
              background-color: rgba(255, 132, 132, 0.292);
              color: red;
              border-radius: .02rem;
            }

            .price {
              font-size: .12rem;
              color: red;
            }
          }
        }
      }
    }
  }


  .adm-tab-bar {
    border-top: 1px solid #ccc;
    width: 100%;
    position: fixed;
    bottom: 0;
    background-color: #fff;

    .adm-tab-bar-item-active {
      color: red;
    }
  }
}

//分类
.cart {
  h2 {
    text-align: center;
    margin: 0.2rem 0rem
  }

  .adm-search-bar {
    padding: .1rem;
    margin-bottom: .1rem;

    input {
      font-size: .12rem;
    }
  }

  .adm-swiper {
    height: 1.5rem;

    .content {
      height: 1.2rem;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 48px;
      user-select: none;
    }

    img {
      width: 100%;
      height: 100%;
    }
  }

  main {
    flex: 1;
    overflow-y: scroll;
    border-top: 1px solid #ccc;
    display: flex;
    padding-bottom: 0.5rem;

    .adm-side-bar-item-highlight {
      width: .03rem;
      background: red;
    }

    .adm-side-bar-item-active {
      color: red;
      font-weight: 900;
    }

    .shoplistcart {
      flex: 1;
      height: 100%;
      background-color: white;
      overflow-y: scroll;

      .shoplist {
        display: flex;
        flex-wrap: wrap;

        h3 {
          width: 100%;
          padding-left: .1rem;
          line-height: .4rem;
        }

        .shop {
          background-color: #fff;
          width: 28%;
          height: .8rem;
          margin: .06rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;

          .shopname {
            white-space: nowrap;
            text-align: center;
          }

          img {
            width: .5rem;
            height: .5rem;
          }
        }
      }
    }
  }
}

//全部商品
.goods {
  width: 100%;
  height: 100vh;
  background-color: #eee;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .top {
    background-color: #fff;
    padding: 0 .2rem;

    h2 {
      text-align: center;
      line-height: .4rem;
    }

    .adm-tabs-tab-active {
      color: red;
    }

    .adm-tabs {
      --active-line-color: red;
    }
  }

  .shoplist::-webkit-scrollbar {
    width: 0 !important;
  }

  .shoplist {
    margin: .2rem .1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex: 1;
    overflow-y: auto;
    margin-bottom: .5rem;

    .shop {
      width: 48%;
      height: 2.6rem;
      background-color: #fff;
      margin-bottom: .1rem;
      border-radius: .06rem;
      overflow: hidden;

      img {
        width: 100%;
      }

      .name {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis; //超出显示省略号
        display: -webkit-box; //必须结合的属性，将对象作为弹性伸缩盒子模型显示
        -webkit-line-clamp: 2; //用来限制在一块元素显示的文本的行数
        -webkit-box-orient: vertical; //必须结合的属性，设置或检索伸缩h盒对象的子元素的排列方式
        padding: 0 .2rem;
        font-size: .14rem;
      }

      .oprice {
        padding: .04rem .2rem;

        span {
          background-color: rgb(255, 221, 224);
          color: red;
          padding: .02rem .04rem;
          font-size: .12rem;
          border-radius: .04rem;
        }
      }

      .price {
        padding: 0 .2rem;
        color: red;
        font-size: .12rem;
      }
    }
  }
}

//我的
.mine {
  background-color: #ccc;

  .imgbox {
    height: 1.6rem;
    background-image: url(./assets/hena-img.gif);
    background-size: 100%;
  }

  main {
    flex: 1;
    overflow-y: scroll;
    margin-bottom: 0.5rem;

    .m_top {
      margin: 0.12rem;
      background-color: #fff;
      padding: 0.15rem;
      border-radius: 8px;

      ul {
        display: flex;
        justify-content: space-around;

        li {
          display: flex;
          flex-direction: column;
          align-items: center;

          span {
            font-weight: 600;
          }
        }
      }
    }

    .m_bot {
      margin: 0.12rem;
      background-color: #fff;
      border-radius: 8px;
      padding: 0rem 0.1rem 0.15rem 0.1rem;

      .adm-list-item-content {
        align-items: center;

        .adm-list-item-content-extra {
          font-size: 12px;
          color: grey;
        }

        .adm-list-item-content-main {
          font-weight: 600;
        }
      }

      dl {
        display: flex;
        justify-content: space-around;

        dt {
          display: flex;
          flex-direction: column;
          align-items: center;

          span {
            font-size: .12rem;
            font-weight: 600;
            margin-top: .1rem;
          }
        }
      }
    }

    .m_vip {
      margin: 0.12rem;

      .adm-list-item {
        border-radius: 8px;
        padding: 0rem .1rem;
      }
    }
  }
}

//登录
.login {
  background: url(./assets/login.png);
  background-size: 100%;
  justify-content: center;

  .Box {
    width: 100%;
    padding: 0.3rem;

    .odiv {
      margin-top: 0.3rem;
      text-align: center;

      span {
        border-bottom: 1px solid;
        color: #fff;
      }

      input {
        width: 100%;
        outline: none;
        height: 0.4rem;
        border: none;
        border-radius: 20px;
        padding-left: .2rem;
      }
    }

    .btn {
      border: none;
      border-radius: 20px;

      input {
        background-color: #ff4189;
        padding-left: 0rem;
        color: #fff;
      }
    }
  }

}

//注册
.register {
  background: url(./assets/login.png);
  background-size: 100%;
  justify-content: center;

  .Box {
    width: 100%;
    padding: 0.3rem;
    margin-top: 1rem;

    .odiv {
      margin-top: 0.3rem;
      text-align: center;

      span {
        border-bottom: 1px solid;
        color: #fff;
      }

      input {
        width: 100%;
        outline: none;
        height: 0.4rem;
        border: none;
        border-radius: 20px;
        padding-left: .2rem;
      }
    }

    .btn {
      border: none;
      border-radius: 20px;

      input {
        background-color: #ff4189;
        padding-left: 0rem;
        color: #fff;
      }
    }
  }

}

//重定向
.notfound {
  justify-content: center;

  h1 {
    text-align: center;
    font-weight: 900;
    font-size: .5rem;
    color: red;
  }
}

//详情
.detail {
  .top {
    border-bottom: 1px solid #ccc;
  }

  .img {
    height: 3rem;
    box-sizing: border-box;

    img {
      height: 3rem;
    }
  }

  .customIndicator {
    position: absolute;
    bottom: .06rem;
    right: .06rem;
    background: rgba(0, 0, 0, 0.3);
    padding: .04rem .08rem;
    color: #ffffff;
    border-radius: .04rem;
    user-select: none;
  }

  .info {
    flex: 1;
    overflow-y: auto;

    .act_price {
      height: 1.2rem;
      background-image: url(./assets/tab.png);
      display: flex;
      justify-content: space-between;
    }

    .left {
      padding: .1rem .2rem;

      p {
        font-size: .14rem;
        color: rgb(221, 3, 3);
      }

      p:nth-child(1) {
        background-color: rgb(250, 204, 231);
        width: .8rem;
        margin: .1rem 0rem;
      }

      p:nth-child(2) {
        margin: .1rem 0rem;
        width: 1.4rem;
        font-weight: 600;

        span {
          font-size: .2rem;

        }
      }
    }

    .right {
      font-size: .14rem;
      font-weight: 600;
      color: rgb(221, 3, 3);
      margin-top: .45rem;
      padding: 0px .2rem;
    }

    .name {
      padding: 0px .2rem;

      p:nth-child(1) {
        border: 1px solid rgb(211, 6, 6);
        color: rgb(211, 6, 6);
        width: .6rem;
        font-size: .12rem;
        text-align: center;
        height: .2rem;
        line-height: .2rem;
        margin-bottom: .2rem;
        font-weight: 900;
      }

      p:nth-child(2) {
        font-weight: 600;
      }

      p:nth-child(3) {
        font-size: .12rem;
        margin-top: .1rem;
        color: rgb(146, 146, 146);
      }
    }
  }

  .tabbar {
    width: 100%;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    height: .6rem;
    border-top: 1px solid #ccc;
    text-align: center;
    align-items: center;
    font-size: .14rem;

    .buy {
      width: 2rem;
      display: flex;

      p {
        width: 1rem;
        text-align: center;
        height: .4rem;
        line-height: .4rem;
        font-size: .14rem;
      }

      .addgoodscart {
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        background-color: #ff6700;
        color: #fff;
      }

      .buyit {
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
        background-color: #c01205;
        color: #fff;
      }
    }
  }
}

//搜索
.searchme {
  padding: 0px 10px;

  .top {
      height: 40px;
      padding: 10px 0px;

      .adm-nav-bar-title {
          font-size: 18px;
          font-weight: 600;
      }
  }

  .search {
      margin-top: 10px;
      height: 40px;
      position: relative;
      input {
          width: 80%;
          height: 35px;
          outline: none;
          border: none;
          border-radius: 5px;
          text-indent: 10px;
          background-color: #f3f1f1;
      }

      span {
          margin-left: 20px;
      }
      .search_list {
          width: 300px;
          position: absolute;
          top: 35px;
          z-index: 25;
          background-color: #fff;
          border: 1px solid #ccc;
          padding: 10px 10px;
          p {
              width: 300px;
              margin-bottom: 10px;
              color: rgb(131, 130, 130);
              border-bottom: 1px solid #e5e5e5;
              // text-align: center;
              padding: 10px 0px ;
              font-size: 14px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
          }
      }
  }

  .currentsearch,
  .historysearch {

      .currentsearch_t,
      .historysearch_t {
          margin-top: 20px;
          display: flex;
          justify-content: space-between;

          span {
              font-weight: 700;
              font-size: 18px;
          }
      }

      .list {
          font-size: 14px;
          display: flex;
          justify-content: flex-start;
          margin-top: 8px;
          flex-wrap: wrap;

          p {
              width: 100px;
              background-color: #e5e5e5;
              color: rgb(131, 131, 131);
              border-radius: 20px;
              height: 30px;
              line-height: 30px;
              text-align: center;
              margin-right: 8px;
              margin-bottom: 10px;
          }
      }

  }
}

//购物车
.shopcart {
  background-color: #fff;

  .adm-nav-bar-title {
    font-weight: 600;
  }

  .good {
    display: flex;
    padding: .2rem;
    border-bottom: 1px solid #eee;
    align-items: center;

    input {
      margin-top: .3rem;
    }

    .img-box {
      width: .8rem;
      margin: 0 .1rem;

      img {
        width: 100%;
      }
    }

    .text {
      flex: 1;
      display: flex;
      flex-direction: column;

      .name {
        font-weight: 900;
        margin-bottom: .1rem;
        display: inline;
      }

      .send {
        width: 0.8rem;
        text-align: center;
        color: #de4648;
        margin-bottom: .1rem;
        font-size: .12rem;
        display: inline;
        background-color: #faeaeb;
      }

      .have {
        background-color: bisque;
        color: burlywood;
        margin-bottom: .1rem;
        font-size: .12rem;
      }

      .price {
        display: flex;
        justify-content: space-between;

        .value {
          color: red;
          font-size: .16rem;
          font-weight: 900;
        }

        .btn {
          span {
            width: .26rem;
            height: .26rem;
            text-align: center;
            line-height: .26rem;
            border: 1px solid #eee;
            display: inline-block;
            font-size: .16rem;
          }
        }
      }
    }
  }
}

//收藏
.collect {
  background-color: #f2f2f2;

  .top {
    border-bottom: 1px solid #ccc;
    background-color: white;
  }

  main {
    flex: 1;
    overflow-y: auto;

    .bigbox {
      height: 1.5rem;
      margin: 0.06rem;
      border-radius: 8px;
      background-color: white;
      display: flex;
      align-items: center;
      padding: 0.05rem;

      .oimg {
        width: 0.8rem;
        height: 0.8rem;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .otxt {
        flex: 1;
        margin-left: .05rem;

        .quote {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .activity {
            p {
              font-size: .2rem;
            }
          }

          .delet {
            border: 1px solid;
            color: gray;
            font-size: .14rem;
            width: 0.8rem;
            height: 0.25rem;
            text-align: center;
            border-radius: 20px;
            line-height: .25rem;
          }
        }

        .cost,
        .activity {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: .12rem;
          font-weight: 600;
          color: #ff3700;

          p {
            font-size: .12rem;
            font-weight: 600;
            color: #ff3700;
          }
        }

        .cost {
          background-color: #ff370034;
          width: 1rem;
          margin-left: 0.08rem;
          text-align: center;
        }

      }
    }
  }
}